body{
	background:#f3f3f3;
}
$imgurl-base: "../../newimages/center";
$gray: #c9caca;
$light-gray: #f5f5f5;
$black: #595757;
$light-black: #9fa0a0;
$red: #ff4739;
$blue: #1a58c8;
%inline-block{
	display:inline-block;
	*display:inline;
	*zoom:1;
}
%block-100{
	display:block;
	width:100%;
	height:100%;
}
.user-center{
	color:$black;
	font-size:14px;
	width: 1170px;
	margin: 38px auto;
	a{
		text-decoration: none;
	}
	a:hover{
		text-decoration: underline;
	}
}
.uc-nav{
	width:128px;
	float:left;
	font-size:16px;
	text-align:center;
	a{
		color:$black;
	}
	dt{
		height: 48px;
		line-height: 48px;
		border-bottom: 1px solid $gray;
	}
	dd{
		margin-top: 28px;
	}
	li{
		width: 100%;
		position:relative;
		margin-bottom: 28px;
		i{
			display: none;
			background: url(#{$imgurl-base}/icon-nav-arrow.png);
			width: 6px;
			height: 11px;
			position: absolute;
			right:4px;
			top:3px;
		}
	}
	li.cur{
		a{
			color: $blue;
		}
		i{			
			display: block;
		}
	} 
}
.uc-content{
	width:1027px;
	float:right;
	background:#fff;
	.uc-tabs{
		height: 48px;
		width: 100%;
		font-size:16px;
		border-bottom: 1px solid $gray;
		li{
			position: relative;
			@extend %inline-block;
			padding: 0 28px;
			height: 47px;
			line-height: 47px;
			border-bottom: 3px solid transparent;
			cursor: pointer;
			background: url(#{$imgurl-base}/tab-seperate.jpg) no-repeat right center;
		}
		li.last{
			background: none;
		}
		li.cur{
			border-bottom: 3px solid $red;
		}
	}
	table{
		label.error{
			color:$red;
			padding-left:8px;
		}
	}
	%submit{
		display: block;
		border:none;
		width:97px;
		height:35px;
		line-height: 35px;
		text-align: center;
		color:#fff;
		background:#ff4f43;
		border-radius:3px;
		font-size:18px;
		text-decoration: none;
	}
	/*baseinfo*/
	.uc-table{
		display: none;
		&.cur{
			display: block;
		}
		padding:30px 0;
		table{
			width:100%;
		}
		tr{
			height: 56px;
			line-height: 56px;
		}
		td{		
			vertical-align: middle;
		}
		select{
			height: 29px;
		}
		label{
			padding-right:30px;
		}
		em{
			color:#f28900;
			font-style: normal;
		}
		#select-birthday span{			
			margin: 0 10px 0 5px;
			position: relative;
			top: 3px;
		}
		.td-left{
			width:130px;
			text-align: right;
			padding-right:12px;
		}
		.input{
			line-height: 18px;
			height: 18px;
			border: 0;
			padding: 6px 8px;
			border: 1px solid $gray;
			width: 280px;
			overflow: hidden;
			font-size: 14px;
			&.address{
				width: 660px;
			}
		}
		a{
			color:$blue;
		}
		.select-style{
			a{
				color:$black;
				text-decoration: none;
			}
			input{
				width:1px;
				visibility: hidden;
			}
		}
		button.submit{
			cursor:pointer;
			@extend %submit;
			&.save{
				width: 135px;
			}
		}
	}
	/*people photo*/
	.uc-photo{
		display: none;
		&.cur{
			display: block;
		}
		font-size: 14px;
		padding: 40px 0 60px 48px;
		.photo-left{
			float:left;
			width:547px;
			border-right: 1px solid $gray;
			.select-img{
				i{
					background: url(#{$imgurl-base}/icon-select-img.jpg);
					width: 21px;
					height: 21px;
					vertical-align: top;
					margin:12px 10px 0 15px;
					@extend %inline-block;
				}
			}
			.select-remain{
				color:$light-black;
				margin-top:15px;
				margin-bottom: 28px;
			}
			.bigimg-container{
				width:512px;
				height: 246px;
				border: 1px solid $gray;
				text-align: center;
				background: $light-gray;
				img{
					width:217px;
					height: 217px;
					margin-top:14px;
					vertical-align: top;
				}
			}
			.submit-container{
				padding-top:31px;
			}
			a.submit{
				@extend %submit;
				margin:0 auto;
			}
		}
		.photo-right{
			float: left;
			padding-left:37px;
			width: 270px;
			font-size: 14px;
			.preview-title{
				font-size: 18px;
				font-weight: bold;
				margin-top: 10px;
			}
			.preview-remain{
				color:$light-black;
				margin-top:12px;
				line-height: 18px;
			}
			%img{
				border: 1px solid $gray;
				background: $light-gray;
			}
			p{
				margin-top: 5px;
				color:$light-black;
			}
			img{
				vertical-align: top;
			}
			.preview-img100{
				margin-top: 15px;
				.img{
					width:100px;
					height: 100px;
					@extend %img;
				}
			}
			.preview-img50{
				margin-top: 25px;
				.img{
					width:50px;
					height: 50px;
					@extend %img;
				}
			}
		}
	}
	/*consult and reply*/
	.consult-title{
		color:$blue;
		padding:18px 0 18px 30px;
		font-size:16px;
		color:#0075c2;
	}
	.consult-table{
		padding: 0 13px;
		table{			
			width: 100%;
			font-size: 14px;
			border:1px solid $gray;
			border-collapse:collapse;
			thead tr{
				background:#e6e6e6;
				text-align: center;
				color:$black;
				th{
					padding:22px 0 10px 0;
					vertical-align: top;
				}
			}
			td{
				border-collapse:collapse;
				border:1px solid $gray;
				border-top:none;
				vertical-align: top;
				padding: 30px 13px;
				line-height:24px;
				em{
					margin-left:10px;
					font-weight: normal;
					color:$light-black;
				}
				span{
					color:$red;
				}
				&.name{
					color:$blue;
					a{
						color: $blue;
					}
				}
				&.img{
					padding: 23px;
				}
			}
		}
	}
	/*report*/
	.report-content{
		padding: 40px 36px 0 36px;
		.report-title{
			color:#ff4637;
			font-size: 16px;
		}
		.report-detail{
			line-height: 30px;
			padding-top: 20px;
		}
		.report-list{
			margin-top: 30px;
			border-top: 1px solid $gray;
			li{
				line-height: 54px;
				width: 100%;
				border-bottom: 1px solid $gray;
				padding:0 10px;
				a{
					color:$black;
				}
			}
		}
	}
	/*search*/
	.search-bar{
		@extend %inline-block;
		height: 42px;
		float: right;
		font-size:0;
	}
	.search-input{
		line-height: 16px;
		height: 16px;
		border: 0;
		padding: 12px 2px;
		border: 1px solid $gray;
		width: 368px;
		overflow: hidden;
		color: $light-black;
		font-size: 12px;
	}
	.search-btn{
		@extend %inline-block;
		vertical-align: top;
		background:$blue;
		width: 122px;
		height: 42px;
		line-height: 42px;
		text-align: center;
		color:#fff;
		font-size:14px;
		a{
			color:#fff;
			text-decoration:none;
			@extend %block-100;
		}
	}
	.search-product{
		.search-input{
			width: 230px;
		}
		.search-btn{
			width: 82px;
		}
	}
	/*order*/
	.order-tabs{
		position:relative;
		height: 48px;
		.recyle{
			position: absolute;
			right:28px;
			top:20px;
			i{
				@extend %inline-block;
				width: 17px;
				height: 21px;
				background:url(#{$imgurl-base}/icon-recyle.png);
				vertical-align: top;
				margin:-4px 5px 0 0;
			}
		}
	}
	.order-content{
		display: none;
		&.cur{
			display: block;
		}
		padding:13px;
		.search-box{
			padding-bottom:25px;
		}
		.order-select{
			@extend %inline-block;
			height: 42px;
			line-height: 42px;
			position:relative;
			i{
				@extend %inline-block;
				width: 9px;
				height: 5px;
				background:url(#{$imgurl-base}/icon-select-down.png);
				vertical-align: top;
				margin:18px 0 0 5px;
			}
		}
	}
	.order-table{
		table{
			width: 100%;
			text-align: center;
		}
		thead tr{
			background:#fff6f2;
		}
		th{
			padding:30px 0 15px 0;
		}
		%td{			
			padding:20px 0;			
			border-collapse:collapse;
			border:1px solid $gray;
		}
		.order-title{	
			td{
				@extend %td;
				text-align: left;
			}	
			%common-span{
				padding:25px 0 15px 0;
			}
			.time{
				@extend %common-span;
				padding:0 15px 0 10px;
			}
			.number{
				@extend %common-span;
			}			
		}
		.order-detail{	
			td{
				@extend %td;
				vertical-align: middle;
			}
			a{
				color: black;
				text-decoration: none;
			}
			.detail{
				padding-left: 11px;
				width:394px;
			}
			.img-box{
				img{
					float:left;
					width:88px;
					height:88px;
					border:1px solid #d6cdcc;
				}
				dl{
					float: left;
					width: 250px;
					text-align: left;
					padding-left:14px;
				}				
				dt{
					display: block;
					height:68px;
					padding-top:4px;
					line-height: 17px;
				}
				a{
					color:$black;
				}
				dd{
					color:$light-black;
				}
			}
			.status{
				line-height: 28px;
				.order-status{
					color:#0075c2;
				}
				.logistics{
					position:relative;
					z-index: 10;
				}
				i.arrow{
					display: block;
					position:absolute;
					width: 9px;
					height: 15px;
					background:url(#{$imgurl-base}/tip-arrow-right.png);
					top: 70px;
					right: -9px;
					z-index: 12;
				}
				.logistics-detail{
					position:absolute;
					z-index: 11;
					background:#fff;
					top:-70px;
					right:67px;
					width: 440px;
					height: 248px;
					border:1px solid $gray;
				}
				.logistics-content{
					padding:20px 12px;
					text-align: left;
				}
				.logistics-title{
					padding:0 0 15px 18px;
					border-bottom:1px solid $gray;
				}
				.logistics-list{
					padding-left: 20px;
					height: 175px;
					overflow: auto;
				}
				dl{
					border-left:1px solid $gray;
					padding:10px 22px;
				}
				dt{
					position:relative;
					color:#f28900;					
					i{
						display: block;
						position:absolute;
						width: 10px;
						height: 10px;
						background:url(#{$imgurl-base}/icon-small-round.png);
						top: 7px;
							left: -27px;							
					}
				}
				dd{
					margin-top: 10px;
					color:$light-black;
				}
			}
			.operate{
				i{
					@extend %inline-block;
					width: 23px;
					height: 23px;
					background:url(#{$imgurl-base}/icon-time.png);
					vertical-align: top;
					margin:-4px 6px 0 0;
				}
				.rest-time{
					color:$light-black;
					@extend %inline-block;
					padding-bottom:20px;
				}
				.buy{
					@extend %inline-block;
					width: 94px;
					height: 30px;
					line-height: 30px;
					font-size: 16px;
					text-align: center;
					background:$red;
					color:#fff;
					margin-bottom:16px;
				}
			}			
		}
		.small-block{
			height: 8px;
		}
		.big-block{
			height: 20px;
		}
	}
	/*address*/
	.address-content{
		padding-left:32px;
	}
	.address-title{
		padding-bottom:20px;
		.title{
			color:$blue;
		}
		.title-remain{
			color:$light-black;
			padding-left:20px;
		}
	}
	.address-list-remain{
		padding:30px 0 20px 8px;
		color:$light-black;
	}
	.address-list{		
		table{
			width: 100%;
		}
		thead tr{
			background:#fff6f2;
			th{
				padding: 0 8px;
				text-align: left;
			}
		}
		tbody tr{
			border-bottom:1px solid $gray;
			&.no-border{
				border:none;
			}
		}
		td{
			padding: 8px;
			line-height: 20px;
			text-align: left;
		}
		a{
			color: $blue;
		}
		.operation{
			width: 230px;
			i{
				@extend %inline-block;
				width: 87px;
				height: 36px;
				line-height: 36px;
				background:#c3e7ff;
				text-align: center;
				border-radius:18px;
				margin-left:40px;
			}
		}
	}
	/*favor*/		
	.favor-content{	
		display: none;
		&.cur{
			display: block;
		}	
		padding:32px 28px;
		%input{
			position: relative;
			top: 2px;	
		}
		.check{
			padding:30px 0;			
			a{
				color:$blue;
			}
			input{
				@extend %input;
			}
			.store{
				padding:0 9px 0 20px;
			}
			.attend{
				padding-left:9px;
			}
		}
		.favor-list{
			margin-left:-59px;
			%img{
				width: 198px;
				height: 198px;
			}
			li{
				float:left;
				display: inline;
				margin:0 0 20px 59px;
			}
			.img{
				@extend %img;
				position:relative;
				img{
					@extend %img;
				}
				%i{
					position:absolute;
					top:0;
					width: 30px;
					height: 30px;
					font-size: 0;
					text-indent: -9999px;
					a{
						@extend %block-100;
					}
				}
				.cart{
					@extend %i;
					right: 41px;
					background:rgba(0,0,0,0.5) url(#{$imgurl-base}/icon-cart.png) no-repeat center center;
				}
				.recyle{
					@extend %i;
					right: 6px;
					background:rgba(0,0,0,0.5) url(#{$imgurl-base}/icon-recyle-white.png) no-repeat center center;
				}
			}
			dt{
				margin-top:10px;
			}	
			dd{
				margin-top:18px;
				.down{
					@extend %inline-block;
					text-align: center;
					width: 24px;
					height: 24px;
					line-height: 24px;
					vertical-align: bottom;
					background:#ff4637;
					color: #fff;
					border-radius:50%;
					margin:0 20px;
				}
				.price{
					color:#f28900;
				}
				a{
					color:$blue;
					text-decoration: none;
				}
			}		
			input{				
				@extend %input;	
			}
		}
	}
	.search-filter{
		@extend %inline-block;
		ul{
			margin-bottom: 20px;
		}
		ul,li{
			@extend %inline-block;
		}
		li{
			margin:0 12px;
			cursor:pointer;
			&.cur{
				cursor: default;
				padding:6px 8px;
				background:#c3e7ff;
				color:$blue;
			}
			a{
				color:$black;
			}
		}
	}
}